<ul class="al-msg-center clearfix">
  <li class="dropdown">
    <a href class="dropdown-toggle" id="msg-dd1" data-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-bell-o"></i><span>{{ noReads }}</span>

      <div class="notification-ring"></div>
    </a>

    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd1">
      <i class="dropdown-arr"></i>

      <div class="header clearfix">
        <strong>今天</strong>
        <a (click)="readAllAlerts($event)" href="javascript:void(0);">全部标为已读</a>
      </div>
      <div class="msg-list">
        <a *ngFor="let item of _alerts" href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img [ngClass]="{'photo-msg-item': !item.image}"
                                     src="{{ item.assigneeAvatar | imgPath }}"></div>
          <div class="msg-area">
            <div [innerHTML]="item.title"></div>
            <span>{{ item.read | msgRead }}</span>
          </div>
        </a>
      </div>
    </div>
  </li>
  <li class="dropdown">
    <a href class="msg dropdown-toggle" id="msg-dd2" data-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-envelope-o"></i><span>{{ msgs.length }}</span>
      <div class="notification-ring"></div>
    </a>
    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd2">
      <i class="dropdown-arr"></i>
      <div class="header clearfix">
        <strong>消息</strong>
        <a (click)="readAllMsgs($event)" href="javascript:void(0);">全部标为已读</a>
      </div>
      <div class="msg-list">
        <a *ngFor="let item of msgs" href="javascript:void(0)" class="clearfix">
          <div class="img-area"><img [ngClass]="{'photo-msg-item': !item.image}"
                                     src="{{ item.userAvatar | imgPath }}"></div>
          <div class="msg-area">
            <div [innerHTML]="item.title"></div>
            <span>{{ item.createTime | date:'y-MM-dd HH:mm:ss' }}</span>
          </div>
        </a>
      </div>
      <a (click)="moreMsgs($event)" href="javascript:void(0);">查看所有</a>
    </div>
  </li>
</ul>
